<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
		<link rel="stylesheet" href="__CDN__/assets/vvptd/setting/css/mui.min.css">
		<link rel="stylesheet" href="__CDN__/assets/vvptd/setting/css/clear.border.css" />
		<link rel="stylesheet" type="text/css" href="__CDN__/assets/vvptd/setting/css/style.css"/>
        <link rel="stylesheet" type="text/css" href="__CDN__/assets/vvptd/layer/need/layer.css"/>
        <script src="__CDN__/assets/vvptd/layer/layer.js"></script>
		<style type="text/css">
			
		</style>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper task-main">
			
			<div class="mui-scroll">
				<p class="title">新手任务</p>
				<!--数据列表-->
				<ul class="mui-table-view task_list">
					<!--<li class="mui-table-view-cell">-->
						<!--<div class="f-l">-->
							<!--<p class="tit">完成一笔“帮买”订单</p>-->
							<!--<p class="num">经验值+10</p>-->
						<!--</div>-->
						<!--<div class="f-r">-->
							<!--<button class="btn btn1" type="button">已完成</button>-->
						<!--</div>-->
					<!--</li>-->
					<!---->

				</ul>
			</div>
		</div>
		<script src="__CDN__/assets/vvptd/setting/js/mui.min.js"></script>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
            var page = 1;
            getTaskList();
            function getling(tid,_this){

                mui.ajax('/vvptd/member/getLingTask', {
                    type: 'post',
                    data: {
                        tid: tid
                    },
                    success: function (data) {
                        if(data.code==1){
                            layer.open({
                                content:'领取成功,请点击右上角查看'
                                , skin: 'msg'
                                , time: 2 //2秒后自动关闭

                            });
                            _this.removeClass('btn2');
                            _this.addClass('btn1');
                            _this.html('已领取');
                            _this.removeAttr("onclick");
                        }
                    }
                })

            }
            function getTaskList(){
                mui.ajax('/vvptd/member/task_main',{
                    type:'post',
                    data:{
                        page:page
                    },
                    success: function (data) {
                        if(data.data.length>0){
                            var arr  = data.data;
                            var html = '';
                            for(var i =0;i<arr.length;i++){
                                html+='<li class="mui-table-view-cell">';
                                html+='<div class="f-l">';
                                html+='<p class="tit">'+arr[i].title+'</p>';
                                html+='<p class="num">余额+'+arr[i].reward_num+'</p>';
                                html+='</div>';
                                html+='<div class="f-r">';
                                if(arr[i].status == 1){
                                    html+='<button class="btn btn2" type="button" onclick="getling('+arr[i].id+',$(this))">点击领取</button>';
                                }else{
                                    html+='<button class="btn btn1" type="button">已领取</button>';
                                }
                                html+='</div>';
                                html+='</li>';
                            }
                            //console.log(html)
                            if(page ==1) {
                                $('.task_list').html(html);
                            }else{
                                $('.task_list').append(html);
                            }
                        }
                    },
                    error: function (data) {
                        layer.open({
                            content:'网络繁忙'
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭

                        });
                    }
                })
            }

			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
                    location.href='';
//					var table = document.body.querySelector('.mui-table-view');
//					var cells = document.body.querySelectorAll('.mui-table-view-cell');
//					for (var i = cells.length, len = i + 3; i < len; i++) {
//						var li = document.createElement('li');
//						li.className = 'mui-table-view-cell';
//						li.innerHTML = '<div class="f-l">'
//								+			'<p class="tit">完成一笔配送距离为3公里以内的订单</p>'
//								+			'<p class="num">经验值+10</p>'
//								+		'</div>'
//								+		'<div class="f-r">'
//								+			'<button class="btn btn2" type="button">去完成</button>'
//								+		'</div>';
//						//下拉刷新，新纪录插到最前面；
//						table.insertBefore(li, table.firstChild);
//					}
					
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
//					var table = document.body.querySelector('.mui-table-view');
//					var cells = document.body.querySelectorAll('.mui-table-view-cell');
//					for (var i = cells.length, len = i + 5; i < len; i++) {
//						var li = document.createElement('li');
//						li.className = 'mui-table-view-cell';
//						li.innerHTML = '<div class="f-l">'
//								+			'<p class="tit">完成一笔配送距离为3公里以内的订单</p>'
//								+			'<p class="num">经验值+10</p>'
//								+		'</div>'
//								+		'<div class="f-r">'
//								+			'<button class="btn btn1" type="button">去完成</button>'
//								+		'</div>';
//						table.appendChild(li);
//					}
                    ++page;
                    getTaskList();
				}, 1500);
			}
//			if (mui.os.plus) {
//				mui.plusReady(function() {
//					setTimeout(function() {
//						mui('#pullrefresh').pullRefresh().pullupLoading();
//					}, 10);
//
//				});
//			} else {
//				mui.ready(function() {
//					mui('#pullrefresh').pullRefresh().pullupLoading();
//				});
//			}
		</script>
	</body>

</html>